<!--
 * @Author: junsong Chen 779217162@qq.com
 * @Date: 2024-07-12 10:44:19
 * @LastEditTime: 2024-07-12 10:44:23
 * @Description: 
-->
<template>
  <div>{{ count }}</div>
</template>

<script>
import { reactive, readonly } from "vue";

export default {
  props: {
    initialCount: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    // 使用传入的 initialCount 创建一个响应式对象
    const state = reactive({ count: props.initialCount });

    // 返回 Proxy 对象，使得 count 可以是响应式的
    return {
      count: readonly(state).count,
    };
  },
};
</script>
